<script setup lang="ts">
import ModalComponent from "@runtime/module/Modal/ModalComponent";
import HomeContent from "@components/Apps/Simulation/HomeContent";
import SplashComponent from "@components/Splash/SplashComponent";
import hdr from "@components/Apps/Simulation/Hdr/index.vue";
import "./common/font.css";

import { onMounted, ref, watch } from "vue";

const rate = ref("RGBA(221, 245, 153, 1)");
watch(
  () => HomeContent.Default.ModeType.value,
  (newVal, oldVal) => {
    if (newVal != oldVal) {
      console.log(
        "HomeContent.Default.ModeType.value",
        HomeContent.Default.ModeType.value
      );
      if (HomeContent.Default.ModeType.value == 1) {
        rate.value = "RGBA(221, 245, 153, 1)";
      } else if (HomeContent.Default.ModeType.value == 2) {
        rate.value = "RGBA(207, 172, 250, 1)";
      } else if (HomeContent.Default.ModeType.value == 3) {
        rate.value = "RGBA(195, 208, 255, 1)";
      }
    }
  }
);
onMounted(() => {});
</script>

<template>
  <router-view></router-view>
  <div class="loading" v-show="HomeContent.Default.Loaded.value">
    <hdr></hdr>

    <div class="Rectangle">
      <img
        src="/public/images/教学.png"
        class="io"
        v-if="
          HomeContent.Default.ModeType.value == 1 ||
          HomeContent.Default.ModeType.value == 4
        "
      />
      <img
        src="/public/images/考核.png"
        class="io"
        v-if="HomeContent.Default.ModeType.value == 3"
      />
      <img
        src="/public/images/训练.png"
        class="io"
        v-if="HomeContent.Default.ModeType.value == 2"
      />
      <div class="description">
        <div class="tit">万用表的使用</div>
        <div class="t1">
          万用表是一种多功能、多量程的测量仪表，一般万用表可测量直流电流、直流电压、交流电流、交流电压、电阻和音频电平等，有的还可以测交流电流、电容量、电感量及半导体的一些参数等。万用表按显示方式分为指针万用表和数字万用表。
        </div>

        <div class="t2">
          “A┄” 直流电流档位<br />
          <br />
          “A∽” 交流电流档位<br />
          <br />
          “V∽” 交流电压档位<br />
          <br />
          “V┄ ” 直流电压档位<br />
          <br />
          “Ω” 电阻档位<br />
        </div>
      </div>
    </div>
    <img
      src="/images/pic_教学.png"
      class="ico"
      v-if="HomeContent.Default.ModeType.value == 1"
    />
    <img
      src="/images/pic_考核.png"
      class="ico"
      v-if="HomeContent.Default.ModeType.value == 3"
    />
    <img
      src="/images/pic_训练.png"
      class="ico"
      v-if="HomeContent.Default.ModeType.value == 2"
    />
    <div class="load_txt">{{ HomeContent.Default.ProgressText.value }}</div>
    <a-progress
      :stroke-color="{
        from: '#fff',
        to: '#fff',
      }"
      :show-info="false"
      :percent="HomeContent.Default.ProgressVal.value"
      status="active"
    />
  </div>
</template>
<style scoped>
@font-face {
  font-family: "PangMenZhengDao";
  src: url(../src/assets/font/PangMenZhengDao.TTF);
}

@font-face {
  font-family: "YouSheBiaoTiHei";
  src: url(../src/assets/font/YouSheBiaoTiHei.TTF);
}

.loading {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  background-color: v-bind(rate);
  overflow: hidden;
}
.Rectangle {
  width: 1200px;
  height: 60vh;
  background: #ffffff;
  border-radius: 0 25px 25px 0;
  opacity: 1;
  margin-top: 160px;
  float: left;
}
.description {
  display: inline-block;
  position: absolute;
  top: 204px;
  text-align: start;
}
.io {
  position: absolute;
  top: 300px;
  left: 75px;
}
.ico {
  width: 682px;
  height: 60vh;
  margin-top: 160px;
}

.load_txt {
  position: absolute;
  left: 60px;
  bottom: 10vh;
  font-size: 24px;
  font-weight: 500;
  color: #000000;
}

:deep().ant-progress {
  position: absolute;
  bottom: 8vh;
  left: 50%;
  transform: translate(-50%, 0);
}

:deep().ant-progress-outer {
  width: 1800px;
}

:deep().ant-progress-inner {
  background-color: rgba(0, 0, 0, 0.1);
}

:deep().ant-progress-bg {
  height: 20px !important;
}

:deep().ant-progress-status-active .ant-progress-bg::before {
  background: rgb(0, 255, 255);
}

.tit {
  font-size: 36px;
  font-weight: 600;
  color: #000000;
  line-height: 42px;
  margin-top: 60px;
  margin-bottom: 20px;
}

.t1 {
  width: 400px;
  height: 110px;
  font-size: 16px;
  font-weight: 400;
  color: #5e5e5e;
  line-height: 19px;
  text-align: left;
  margin: 0 auto;
  margin-bottom: 20px;
}

.t2 {
  font-size: 16px;
  font-weight: 400;
  color: #5e5e5e;
  line-height: 19px;
}
</style>
